<p-growl [(value)]="msgs">
</p-growl>


<div class="user-login-container">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">用户名+密码登录</h3>
    </div>
    <div class="panel-body">
      <form #form="ngForm" (ngSubmit)="form.form.valid && login()" novalidate class="form-horizontal" role="form">
        <div class="form-group" [ngClass]="{ 'has-error': form.submitted && !userName.valid }">
          <label class="col-sm-2 control-label">用户名：</label>
          <div class="col-sm-10">
            <input required name="userName" [(ngModel)]="user.username" #userName="ngModel" type="text" class="form-control" placeholder="请输入用户名...（随意输入，假的）">
            <div *ngIf="form.submitted && !userName.valid" class="text-danger">用户名必须输入！</div>
          </div>
        </div>
        <div class="form-group" [ngClass]="{ 'has-error': form.submitted && !password.valid }">
          <label class="col-sm-2 control-label">密码：</label>
          <div class="col-sm-10">
            <input required minlength="6" [(ngModel)]="user.password" name="password" #password="ngModel" type="password" class="form-control"
              placeholder="请输入密码...（随意输入，假的）">
            <div *ngIf="form.submitted && !password.valid" class="text-danger">密码必须输入,至少要6位！</div>
          </div>
        </div>
        <div class="form-group" [ngClass]="{ 'has-error': form.submitted && !imageCodeModel.valid }">
          <label class="col-sm-2 control-label">验证码：</label>
          <div class="col-sm-10">
            <input required length="6" [(ngModel)]="code" name="code" #imageCodeModel="ngModel" type="text" class="form-control"
              placeholder="请输入6位图形验证码">
            <img src="/code/image" style="margin-top: 10px">
            <div *ngIf="form.submitted && !imageCodeModel.valid" class="text-danger">图形验证码必须输入,6位！</div>
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-offset-2 col-sm-10">
            <div class="checkbox">
              <label>
                <input name="remember-me" type="checkbox" [(ngModel)]="user['remember-me']" #remeberMe="ngModel">记住我
              </label>
            </div>
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-success">登录</button>
            <button type="button" class="btn btn-danger" (click)="forgetPassword()" style="margin-left: 10px">忘记密码？</button>
          </div>
        </div>
      </form>
    </div>
  </div>

  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">手机号+短信验证码登录</h3>
    </div>
    <div class="panel-body">
      <form #smsform="ngForm" (ngSubmit)="smsform.form.valid && smsLogin()" novalidate class="form-horizontal" role="form">
        <div class="form-group" [ngClass]="{ 'has-error': smsform.submitted && !mobileModel.valid }">
          <label class="col-sm-2 control-label">手机号：</label>
          <div class="col-sm-10">
            <input required name="mobile" length=11 [(ngModel)]="mobile" #mobileModel="ngModel" type="text" class="form-control" placeholder="请输入手机号码">
            <div *ngIf="smsform.submitted && !mobileModel.valid" class="text-danger">必须输入11位手机号码！</div>
          </div>
        </div>
        <div class="form-group" [ngClass]="{ 'has-error': smsform.submitted && !smsModel.valid }">
          <label class="col-sm-2 control-label">短信验证码：</label>
          <div class="col-sm-10">
            <input required length="6" [(ngModel)]="code" name="code" #smsModel="ngModel" type="text" class="form-control"
              placeholder="请输入6位短信验证码">
            <button type="button" class="btn btn-success" (click)="getSmsCode();" style="margin-top: 10px">获取短信验证码</button>
            <div *ngIf="smsform.submitted && !smsModel.valid" class="text-danger">必须输入6位短信验证码</div>
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-success">登录</button>
          </div>
        </div>
      </form>
    </div>
  </div>

  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">第三方登录</h3>
    </div>
    <div class="panel-body">
      <div class="form-group">
        <a href="/auth/qq">QQ登录</a>
      </div>
    </div>
  </div>

</div>